<template>
  <pannel-header :route="route"></pannel-header>
  <div class="form">
    <el-form :inline="true" :model="searchForm">
      <el-form-item prop="out_trade_no">
        <el-input v-model="searchForm.out_trade_no" placeholder="订单号"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitSearchForm">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <el-table :data="listData.list"
            style="width: 100%">
    <el-table-column prop="out_trade_no" label="订单号" width="150"/>
    <el-table-column prop="hospital_name" label="就诊医院"/>
    <el-table-column prop="service_name" label="陪诊服务"/>
    <el-table-column prop="companion.avatar" label="陪护师">
      <template #default="scope">
        <el-image :src="scope.row.companion.avatar"
                  style="width: 40px;height: 40px"/>
      </template>
    </el-table-column>
    <el-table-column prop="companion.mobile" label="陪护师手机号" width="100"/>
    <el-table-column prop="price" label="总价"/>
    <el-table-column prop="paidPrice" label="已付"/>
    <el-table-column prop="order_start_time" label="下单时间" width="100"/>
    <el-table-column prop="trade_state" label="订单状态">
      <template #default="scope">
        <el-tag :type="statusMap[scope.row.trade_state]">{{ scope.row.trade_state }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="service_state" label="接单状态"/>
    <el-table-column prop="client.mobile" label="联系人手机号" width="120"/>

    <el-table-column fixed="right" label="操作" min-width="100">
      <template #default="scope">
        <el-popconfirm
            v-if="scope.row.trade_state === '待服务'"
            confirm-button-text="Yes"
            cancel-button-text="No"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="是否确认完成？"
            @confirm="confirmEvent(scope.row)"
        >
          <template #reference>
            <el-button type="primary"
                       link>完成服务
            </el-button>
          </template>
        </el-popconfirm>
        <el-button v-else
                   type="primary"
                   link
                   disabled>暂无服务
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div class="pagination-info">
    <el-pagination
        v-model:current-page="paginationData.pageNum"
        v-model:page-size="paginationData.pageSize"
        size="small"
        :page-sizes="[10, 20, 50, 100]"
        :background="false"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>
import {reactive, ref, onMounted, nextTick} from 'vue'
import {orderComplete, orderList} from '../../../api'
import {ElMessage} from "element-plus";
import {InfoFilled} from "@element-plus/icons-vue";
import {useRoute} from 'vue-router'
import PannelHeader from "../../../components/pannel.vue";
import dayjs from "dayjs";

const route = useRoute()
//分页参数
const paginationData = reactive({
  pageNum: 1,
  pageSize: 10
})
//列表数据
const listData = reactive({
  list: [],
  total: 0
})

const getListData = (params = {}) => {
  orderList({...paginationData, ...params}).then(({data}) => {
    console.log(data, 'companionList')
    listData.list = data.data.list
    listData.list.forEach(item => {
      item.order_start_time = dayjs(item.order_start_time).format('YYYY-MM-DD HH:mm:ss')
    })
    listData.total = data.data.total
    console.log(listData, 'listData')
  })
}
onMounted(() => {
  getListData()
})

//表单搜索
const searchForm = reactive({
  out_trade_no: ''
})
//订单查询
const submitSearchForm = () => {
  getListData(searchForm)
}

//page-size 改变时触发
const handleSizeChange = (val) => {
  paginationData.pageSize = val
  getListData()
}
//current-page 改变时触发
const handleCurrentChange = (val) => {
  paginationData.pageNum = val
  getListData()
}
const statusMap = {
  '已取消': 'info',
  '待支付': 'warning',
  '已完成': 'success'
}

//confirmEvent 确认服务完成
const confirmEvent = (item) => {
  orderComplete({id: item.out_trade_no}).then(({data}) => {
    if (data.code === 10000) {
      ElMessage.success(data.message)
      getListData()
    } else {
      ElMessage.error(data.message)
    }
  })

}
</script>
<style lang="less" scoped>
.form {
  display: flex;
  justify-content: end;
  background-color: #fff;
  padding: 10px 0px 10px 10px;
}

.pagination-info {
  padding: 10px 0;
  background-color: #fff;

  .el-pagination {
    justify-content: end;
  }
}
</style>
